const goods = { // 手机库存
    "red|32G": 3,
    "red|16G": 0,
    "blue|32G": 1,
    "blue|16G": 6
};

const mediator = (function () {
    let colorSelect = document.getElementById('colorSelect'),
        memorySelect = document.getElementById('memorySelect'),
        numberInput = document.getElementById('numberInput'),
        colorInfo = document.getElementById('colorInfo'),
        memoryInfo = document.getElementById('memoryInfo'),
        numberInfo = document.getElementById('numberInfo'),
        nextBtn = document.getElementById('nextBtn');

    return {
        changed(obj) {
            let color = colorSelect.value, // 颜色
                memory = memorySelect.value,// 内存
                number = Number(numberInput.value), // 数量
                stock = goods[color + '|' + memory]; // 颜色和内存对应的手机库存数量

            if (obj === colorSelect) { // 如果改变的是选择颜色下拉框
                // colorInfo.innerHTML = color;
                colorInfo.classList.remove(colorInfo.classList[0]);
                colorInfo.classList.add(color);
            } else if (obj === memorySelect) {
                memoryInfo.innerHTML = memory;
            } else if (obj === numberInput) {
                numberInfo.innerHTML = number;
            }

            if (!color) {
                nextBtn.disabled = true;
                nextBtn.innerHTML = '请选择手机颜色';
                return;
            }
            if (!memory) {
                nextBtn.disabled = true;
                nextBtn.innerHTML = '请选择内存大小';
                return;
            }
            if (!number || number !== Math.abs(Math.floor(number))) { // 输入购买数量是否为正整数
                nextBtn.disabled = true;
                nextBtn.innerHTML = '请输入正确的购买数量';
                return;
            }
            if (number > stock) {
                nextBtn.disabled = true;
                nextBtn.innerHTML = '库存不足';
                return;
            }

            nextBtn.disabled = false;
            nextBtn.innerHTML = '加入购物车';
        },

        getForm() {
            return {
                color: colorSelect.value,
                memory: memorySelect.value,
                number: Number(numberInput.value)
            }
        }
    }
})();

// 事件函数：
colorSelect.onchange = function () {
    mediator.changed(this);
};
memorySelect.onchange = function () {
    mediator.changed(this);
};
numberInput.oninput = function () {
    mediator.changed(this);
};
nextBtn.onclick = function () {
    let form = mediator.getForm();
    console.log(form);
}